<template>
  <view class="">
    <cu-custom bgColor="bg-gradual-green" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">课程训练计划</block>
    </cu-custom>

    <view style="margin-bottom: 90rpx;">
      <view style="width: 100%;position: relative;">
        <image style="width: 100%;height: 400upx;" src="../../static/37.png" mode=""></image>
        <view style="position: absolute;top: 0upx;left: 5%;width: 95%;">
          <view style="display: flex;justify-content: space-between;width: 650upx;" @click="jump" :data-src='"./Management_training?id="+id'>
            <view style="font-size: 32upx;color: #fff;margin: 30upx 0;">
              {{course.name}}
            </view>

            <view>
              <image style="width: 40upx;height: 40upx;margin-top: 30upx;" src="../../static/xiugai.png" mode=""></image>
            </view>
          </view>
          <view style="font-size: 22upx;color: #fff;">
            有效期: {{datas.expirationTime}}
          </view>
          <view style="margin-top: 20upx;background-color: rgba(0,0,0,0.6);height: 80upx;width: 90%;position: relative;border-radius: 10upx;">
            <view style="width: 80%;position: absolute;top: 30upx;border-radius: 10upx;overflow: hidden;left: 30upx;">
              <progress :percent="computStatus/course.courseCount*100" active stroke-width="12" backgroundColor="#fff" />
            </view>
            <view style="color: #fff;font-size: 32upx;position: absolute;top: 25upx;right: 30upx;">
              {{computStatus}}/{{course.courseCount}}
            </view>
          </view>
          <view style="display: flex;">
            <view style="margin: 20upx 0;">
              <!-- <image style="width: 80upx;height: 80upx;border-radius: 40upx;" src="../../static/fangke.png" mode=""></image> -->
              <view class="u-f-ajc avatar-teach-name">{{course.teachName}}</view>
            </view>
            <!-- <view @click="jump" :data-src='"/pagesA/Preparation_plan/Class_coach?id="+item.id' style="margin: 20upx 0;font-size: 55upx;border: 5upx dashed #ccc;color: #ccc;border-radius: 40upx;height: 80upx;line-height: 80upx;width: 80upx;text-align: center;font-weight: bold;margin-left: 20upx;">
      				+
      			</view> -->
          </view>
          <view style="font-size: 22upx;color: #fff;">
            备注: {{course.remark}}
          </view>
        </view>
      </view>

      <view style="width: 100%;background-color: #FFFFFF;height: 90upx;line-height: 90upx;padding: 0 30upx;border-bottom: 1upx solid #F7F7F7;">
        课程详情
      </view>

      <uni-swipe-action>
        <uni-swipe-action-item v-for="(item,index) in list" :options="item.options" :key="item.id" @change="swipeChange"
          @click="swipeClick($event, item.id)">
          <view @click="jump" :data-src='item.state == 1 ? "./Training_summary?isMask="+item.state+"&id="+item.id : "/pagesA/Preparation_plan/Class_situation?id="+item.id+"&index="+(index+1)+"&experienceClass=2"'
            style="width: 100%;background-color: #FFFFFF;padding: 20rpx 30upx;border-bottom: 1px solid #F7F7F7;" class="u-f-ac u-f-jsb">
            <view class="u-f-ac">
              <view style="font-size: 40rpx;font-weight: 600;">{{index + 1}}</view>
              <view style="margin-left: 60upx;">
                {{item.name}}
              </view>
            </view>
            <view class="u-f-ac">
              <view style="font-size: 22rpx;color: #999;" v-if="item.state == 1">
                <view style="margin-bottom: 6rpx;">已完成</view>
                <view>{{item.overTime}}</view>
              </view>
              <view class="cuIcon-right" style="margin-left: 20rpx;"></view>
            </view>
          </view>
        </uni-swipe-action-item>
      </uni-swipe-action>

      <!-- <block v-for="(item, index) in list" :key="index"></block> -->

    </view>


    <button @click="jump" data-src="./Edit_course?experienceClass=2" type="default" class="add-button u-f-ajc">新建训练课</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        course: {},
        list: [],
        id: '',
        datas: {},
      }
    },
    onLoad(e) {
      this.id = e.id
      uni.setStorageSync("planId", e.id);
      // uni.setStorageSync("planId", 32);
      // this.id = 32;
      this.course = uni.getStorageSync("course");
      uni.setStorageSync("beforeClass", "");
      uni.setStorageSync("list1", {});
    },
    onShow() {
      uni.setStorageSync("names", '');
      uni.setStorageSync("numsDetail", '');
      uni.setStorageSync("hotTraining", '');
      uni.setStorageSync("formalTraining", '');
      uni.setStorageSync("relaxTraining", '');
      this.getData(this.id);
      this.getDataList(this.id);
    },
    computed: {
      computStatus() {
        return this.list.filter(item => item.state == 1).length
      }
    },
    methods: {
      async getData(planId) {
        let {
          data: {
            datas
          }
        } = await this.$myRuquest({
          url: "/coach/training/getTrainingPlanDetail",
          data: {
            planId,
          }
        })
        this.course = datas;
        console.log('查看训练计划详情', datas)
      },

      async getDataList(planId) {
        let {
          data: {
            datas
          }
        } = await this.$myRuquest({
          url: "/coach/training/getTrainingPlanCourseList",
          data: {
            planId,
            memberId: uni.getStorageSync("phyUser").userId,
            experience: 2,
          }
        })
        this.datas = datas;
        this.list = datas.trainingPlanCourseList;
        let siwpers = {
          options: [{
            text: '删除',
            style: {
              backgroundColor: 'rgb(255,58,49)'
            }
          }],
          sid: 0,
          content: 'item1'
        }
        this.list.forEach((item, index) => {
          Object.assign(item, siwpers)
        })
      },

      swipeChange(e) {
        console.log('返回：', e);
      },
      swipeClick(e, id) {
        let {
          content
        } = e
        if (content.text === '删除') {
          uni.showModal({
            title: '提示',
            content: '是否删除',
            success: (res) => {
              console.log('用户点击了删除', res, id)
              this.deleteServer(id)
              if (res.confirm) {} else if (res.cancel) {
                console.log('用户点击取消');
              }
            }
          });
        }
      },
      async deleteServer(trainingPlanCourseId) {
        uni.showLoading({
          title: "正在删除..."
        })
        let {
          data: {
            result
          }
        } = await this.$myRuquest({
          url: "/coach/training/deleteTrainingPlanCourseById?trainingPlanCourseId=" + trainingPlanCourseId,
          method: "DELETE",
        })
        if (result == 200) {
          uni.showToast({
            title: '删除成功~',
            icon: "success",
            duration: 1000
          });
          this.getDataList(this.id);
        }
        uni.hideLoading();
      },



      jump(e) {
        let url = e.currentTarget.dataset.src
        if (url.indexOf('Edit_course') != -1) {
          if (this.list.length >= this.course.courseCount) {
            uni.showToast({
              title: "创建课程的数量不能超过总课程数量~",
              icon: "none",
              duration: 2000,
            })
            return
          }
        }
        console.log(url)
        if (url == 'Not-yet-open') {
          uni.showModal({
            title: '提示',
            content: '功能即将开放',
            showCancel: false,
            confirmColor: "#DD524D",
            success() {
              return
            }
          })
        } else {
          uni.navigateTo({
            url
          });
        }
      },

    }
  }
</script>

<style lang="scss" scoped>
  .avatar-teach-name {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    color: #FFFFFF;
    font-size: 20rpx;
    background-color: #39BB9E;

  }

  .add-button {
    height: 80rpx;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #39BB9E;
    color: #FFFFFF;
  }
</style>
